import React from 'react'
import { Button, WingBlank, Accordion, List, Modal } from 'antd-mobile';
import './Goods.css'
import axios from 'axios'
import { withRouter } from "react-router-dom";
import foodImg from '../../../src/Images/2.jpg'
const prompt = Modal.prompt;
const alert = Modal.alert
class Goods extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            shopData: [],
            classData: [],
            modal1: false,
            sortId: '',
            sortName: '',
            sortPrice: '',
            MenuData: [
                { MenuId: 1, MenuTitle: '修改菜品' },
                { MenuId: 2, MenuTitle: '添加菜品' },
            ],
        }
    }
    shouldComponentUpdate(nextProps, nextState) {
        return true
    }
    sortChange = (num) => {
        this.setState({ shopData: [] })
        axios({
            url: 'api1/olife/goods/queryGoodsList',
            method: 'GET',
            params: {
                currentPage: '1',
                pageSize: '20',
                sort_id: num
            }
        }).then(data => {
            console.log(data.data.dataList);
            setTimeout(() => {
                this.setState({ shopData: data.data.dataList })
            }, 0)

        }).catch(err => {
            console.log(err);
        })
    }
    addClass = () => {
        prompt(
            '新增分类弹框',
            '',
            [
                { text: '取消' },
                { text: '提交', onPress: value => this.addClassConfirm(value) },
            ],
            'default',
            ['请输入分类名称'],
        )
    }
    // 新增分类确认按钮发起axios请求
    addClassConfirm = (sortName) => {
        console.log(this.props.sortData[0].shop_id);
        axios({
            url: 'api1/olife/goods/addType',
            method: 'GET',
            params: {
                shop_id: this.props.sortData[0].shop_id,
                sort_name: sortName,
                sort_price: '1'
            }
        }).then(data => {
            this.props.comAxios()
            console.log(data);
        }).catch(err => {
            console.log(err);
        })
    }
    // 删除按钮弹框
    confirmBtnBtn = (num) => {
        console.log(num);
        const refuse = alert('是否删除', '删除后不可更改！请谨慎操作', [
            { text: '取消', onPress: () => console.log('取消'), style: 'default' },
            { text: '确定', onPress: () => this.foodDelBtn(num) }
        ]);
    }
    // 点击删除按钮
    foodDelBtn = (num) => {
        axios({
            url: 'api1/olife/goods/delType',
            method: 'GET',
            params: {
                sort_id: num
            }
        }).then(data => {
            this.props.comAxios()
            if (data.data.code === 600) {
                alert('该分类下还存在商品,无法删除！')
            }
        }).catch(err => {
            console.log(err);
        })
    }
    // 编辑弹框
    editBtn = (key, num) => (e) => {
        console.log(key, num);
        e.preventDefault(); // 修复 Android 上点击穿透
        this.setState({
            [key]: true,
            sortId: num
        });
    }
    onClose = key => () => {
        this.setState({
            [key]: false,
        });
    }
    // 确认编辑按钮axios请求
    confirmEdit = (name, price) => {
        console.log('确认');
        axios({
            url: 'api1/olife/goods/editType',
            method: 'GET',
            params: {
                sort_id: this.state.sortId,
                sort_name: name,
                sort_price: price
            }
        }).then(data => {
            this.setState({
                modal1: false
            })
            if (data.data.code === 200) {
                alert('修改成功')
                this.props.comAxios()
            }

            console.log(data);
        }).catch(err => {
            console.log(err);
        })
    }
    NameChange = (e) => {
        this.setState({
            sortName: e.target.value
        })
    }
    NameChange1 = (e) => {
        this.setState({
            sortPrice: e.target.value
        })
    }
    // 新增商品按钮
    shopNewAdd = (sortid) => {
        console.log(sortid);
        const myAdd = this.state.MenuData[1]
        this.props.history.push({
            pathname: '/Home/ZxMenuSet',
            state: { myAdd, sortid }
        })
    }
    // 修改商品按钮
    shopModifyAdd = (a) => {
        console.log(a);
        const myAdd = this.state.MenuData[0]
        this.props.history.push({
            pathname: '/Home/ZxMenuSet',
            state: { myAdd, a }
        })
    }
    // 删除商品按钮
    delShop = (num) => {
        const refuse = alert('是否删除', '删除后不可更改！请谨慎操作', [
            { text: '取消', onPress: () => console.log('取消'), style: 'default' },
            { text: '确定', onPress: () => this.shopDelBtn(num) }
        ]);
    }
    // 删除确认请求
    shopDelBtn = (a) => {
        axios({
            url: 'api/olife/goods/delGoods',
            method: 'GET',
            params: {
                goods_id: a
            }
        }).then(data => {
            this.sortChange(a)
            console.log(data);
        }).catch(err => {
            console.log(err);
        })
    }


    render() {
        return (
            <div>
                <h1>商品界面</h1>
                <div>
                    <WingBlank>
                        <Button onClick={this.addClass.bind(this)}>+新增分类</Button>
                        {/* <Button onClick={this.newAddSort.bind(this, this.props.sortData)}>+新增分类</Button><WhiteSpace /> */}
                    </WingBlank>
                </div>
                <div style={{ marginTop: 10, marginBottom: 10 }}>
                    {
                        (this.props.sortData || []).map((item, index) => {
                            return (
                                <Accordion defaultActiveKey="0" className="my-accordion" onChange={this.sortChange.bind(this, item.sort_id)} key={index}>
                                    <WingBlank className="wing">
                                        <Button type="ghost" inline="true" size="small" className="wingbtn" onClick={this.editBtn('modal1', item.sort_id)}>编辑</Button>
                                        <Button type="ghost" inline="true" size="small" className="wingbtn" onClick={this.shopNewAdd.bind(this, item.sort_id)}>新增</Button>
                                        <Button type="ghost" inline="true" size="small" className="wingbtn" onClick={this.confirmBtnBtn.bind(this, item.sort_id)}>删除</Button>
                                    </WingBlank>
                                    <Accordion.Panel header={item.sort_name}>
                                        <List className="my-list">
                                            {
                                                (this.state.shopData).map(a => {
                                                    return (
                                                        <List.Item key={a.goods_id}>
                                                            <div className="foodList">
                                                                <div className="foodimg">
                                                                    <img src={foodImg} />
                                                                </div>
                                                                <div className="foodTitle">
                                                                    <p>{a.goods_name}</p>
                                                                    <p>价格:{a.goods_price}元/份</p>
                                                                    <p>数量：{a.goods_num}</p>
                                                                </div>
                                                                <WingBlank className="foodBtn">
                                                                    <Button type="ghost" inline="true" size="small" className="wingbtn" onClick={this.shopModifyAdd.bind(this, a)}>修改</Button>
                                                                    <Button type="ghost" inline="true" size="small" className="wingbtn" onClick={this.delShop.bind(this, a.goods_id)}>删除</Button>
                                                                </WingBlank>
                                                            </div>

                                                            {/* {a.goods_name}
                                                            <WingBlank className="wing">
                                                                <Button type="ghost" inline="true" size="small" className="wingbtn">删除</Button>
                                                            </WingBlank> */}
                                                        </List.Item>
                                                    )
                                                })
                                            }

                                        </List>
                                    </Accordion.Panel>
                                </Accordion>
                            )
                        })
                    }
                </div>
                <WingBlank>
                    <Modal
                        popup
                        visible={this.state.modal1}
                        onClose={this.onClose('modal1')}
                        animationType="slide-up"
                        afterClose={() => console.log('关了')}
                    >
                        <List renderHeader={() => <div style={{ fontSize: '18px' }}>修改分类信息</div>} className="popup-list">
                            <List.Item >
                                <label htmlFor="menuName" className='labelName'>
                                    <input onChange={e => this.NameChange(e)}
                                        type='text'
                                        //  onKeyUp={this.testIuput}
                                        name="" id=""
                                        className='inputName'
                                        value={this.state.sortName}
                                        placeholder='请输入分类名称'
                                    />
                                    <input onChange={e => this.NameChange1(e)}
                                        type='text'
                                        //  onKeyUp={this.testIuput}
                                        name="" id=""
                                        className='inputName'
                                        value={this.state.sortPrice}
                                        placeholder='请输入打包费用'
                                    />
                                </label>
                            </List.Item>
                            <List.Item className="itemName">
                                <Button type="ghost" size="small" inline="true" style={{ marginRight: '30px' }} onClick={this.onClose('modal2')}>取消</Button>
                                <Button type="primary" size="small" inline="true" onClick={this.confirmEdit.bind(this, this.state.sortName, this.state.sortPrice)}>确认</Button>
                            </List.Item>
                        </List>
                    </Modal>
                </WingBlank>
            </div>
        )
    }
}

export default withRouter(Goods)